<template>
    <div class="f_div">
      <div class="t_div">财务管理 / <a href="#">应收对账单</a></div>
      <el-container>
  
        <el-header class="header2">
          <div class="h_div">
            <div class="h_in_vid">
              <el-form ref="form" :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="结算状态：">
                  <el-input v-model="value" placeholder="请输入始发地"></el-input>
                </el-form-item>
                <el-form-item label="创建日期：">
                  <el-date-picker v-model="value1" type="datetimerange" range-separator="To"
                    start-placeholder="请选择日期" end-placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="搜索：">
              <el-input v-model="value2" placeholder="请输入关键字搜索"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="tjian">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
            </el-form>
            </div>
          </div>
        </el-header>
        <el-main class="main">
          <el-table height="442px" :data="tableData" row-key="depart_id" default-expand-all stripe style="width: 100%"
            :header-cell-style="{
                background: '#F7F7F7',
                color: '#999',
                textAlign: 'center',
              }" :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="statement_number" label="对账单号" width="150"></el-table-column>
            <el-table-column prop="ct_cl_name" label="客户" width="120"></el-table-column>
            <el-table-column prop="billing_status" label="结算状态" width="120"></el-table-column>
            <el-table-column prop="billing_status" label="订单总数量" width="120"></el-table-column>
            <el-table-column prop="count" label="货物数量" width="120"></el-table-column>
            <el-table-column prop="totalvolume" label="货物总体积" width="120"></el-table-column>
            <el-table-column prop="weight" label="货物总重量" width="120"></el-table-column>
            <el-table-column prop="create_by" label="创建人" width="120"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="120"></el-table-column>
            <el-table-column label="操作">
              <template #default>
                <el-button link type="primary" @click="MX()">明细</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 6, 8, 10]"
              :size="size" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
import { ref, reactive, resolveComponent, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import $http from '@/axios/base.js';
  
  
  export default {
    setup() {
      let tableData = ref([]);
      let value = ref("");
      let value1 = ref("");
      let value2 = ref("");
      let currentPage = ref("1");
      let pageSize = ref("10");
      let ord_id = ref();
      let sign_id = ref();
      let ct_id=ref();
  
  
      let router = useRouter();
  
      function MX() {
        router.push({path:'/Receivable_meter'});
      }
  
  
  
      function show() {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetReceivable_meter/${currentPage.value},${pageSize.value}`)
        .then((res) => {
          tableData.value = res;
          res.forEach((item, index) => {
            GetSign_id(item.sign_id, index);
            GetOrd_id(item.ord_id, index);
            GetCustomer_id(item.ct_id,index);
          });
        })
        .catch((err) => console.log(err));
    }

    const GetSign_id = (id, index) => {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetSign_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err))
    }

    const GetOrd_id = (id, index) => {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetOrd_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err))
    }

    const GetCustomer_id = (id, index) => {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetCustomer_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
          tableData.value[index].create_time = new Date(tableData.value[index].create_time).toISOString().slice(0, 10).toString();
        })
        .catch((err) => console.log(err))
    }
  
      onMounted(() => {
        show()
      });
  
      function tjian() {
        alert(value2.value);
        axios
          .get("http://localhost:5261/api/Bill_ol/GetBill_condition?Origin_place=" + value.value + "&Det_place=" + value1.value + "&Pickup_endtime=" + value2.value + "&currentPage=" + currentPage.value + "&pageSize=" + pageSize.value)
          .then((res) => {
            tableData.value = res.data;
          })
          .catch((err) => console.log(err));
      }
  
  
      const searchForm = reactive({
        level: "1",
        dateRange: "",
        keyword: "",
      });
  
      let currentRow = ref(null);
  
      function handleSearch() {
        console.log(searchForm);
      }
  
      function handleReset() {
        // 重置表单
        searchForm.level = "";
        searchForm.dateRange = "";
        searchForm.keyword = "";
        // 重置表格数据
        // ...
      }
  
      function handlePageChange(val) {
        currentPage.value = val;
      }
  
  
  
  
      return {
        value,
        value1,
        value2,
        tableData,
        searchForm,
        currentPage,
        pageSize,
        handleSearch,
        handleReset,
        handlePageChange,
        //deleteCustomer,
        currentRow,
        show,
        tjian,
        MX,
        ord_id ,
        sign_id,
        ct_id
      };
    },
  };
  </script>
  
  <style scoped>
  .pagination-container {
    display: flex;
    justify-content: right;
    margin-top: 20px;
  }
  
  .t_div {
    margin-bottom: 20px;
    text-align: left;
    font-size: 14px;
    color: #b3b4b6;
  }
  
  a {
    text-decoration: none;
  }
  
  .f_div {
    padding: 0px 50px;
  }
  
  .h_div {
    height: 39px;
  }
  
  .h_in_vid {
    width: 1400px;
    height: 20px;
    margin-top: 20px;
    display: flex;
  }
  
  .header {
    background-color: #ffffff;
    border-radius: 10px 10px 0px 0px;
  }
  
  .header2 {
    background-color: #ffffff;
  }
  
  .main {
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
    height: 650px;
  }
  </style>